<template lang="pug">
    .editor(ref="editor" @drop="handleDrop" @dragover="handleDragOver")
</template>

<script>
import * as monaco from "monaco-editor"

export default {
    props: {
        readOnly: {
            type: Boolean,
            default: false,
        },
    },
    components: {
        monaco
    },
    data() {
        return {
            monacoInstance: null,
            completionOption: [],
        }
    },
    methods: {
        // 初始化编辑器
        initEditor() {
            this.monacoInstance = monaco.editor.create(this.$refs.editor, {
                value: '', // 编辑器内容
                language: 'json', // 语言
                tabSize: 4, // tab缩进数
                padding: {top: 6, bottom: 6}, // 边距
                fontSize: '14px', // 字体大小
                showDeprecated: true, // 代码块折叠
                scrollBeyondLastLine: true, // 代码超出时滚动
                automaticLayout: true, // 自动布局
                readOnly: this.readOnly, // 只读
                minimap: {
                    enabled: true, // 小地图
                },
                lineNumbers: 'on',
            })

            this.monacoInstance.onMouseWheel((event) => {
                event.stopImmediatePropagation()
            })

            // 监听内容变化
            this.monacoInstance.onDidChangeModelContent(() => {
                //
            })

            // 自定义主题
            monaco.editor.defineTheme('metrics-theme', {
                base: 'vs',
                inherit: true,
                rules: [
                    {token: 'keyword', foreground: '#12B881'},
                ],
                colors: {
                    'editor.background': '#F7F9FC',
                },
            })

            // 设置自定义主题
            monaco.editor.setTheme('metrics-theme')
        },

        // 在光标处插入代码
        insertCode(text) {
            const position = this.monacoInstance.getPosition()
            this.monacoInstance.executeEdits('', [
                {
                    range: {
                        startLineNumber: position.lineNumber,
                        startColumn: position.column,
                        endLineNumber: position.lineNumber,
                        endColumn: position.column,
                    },
                    text,
                },
            ])
        },

        // 拖拽入值处理
        handleDrop(event) {
            event.preventDefault()
            event.stopPropagation()
            const value = event.dataTransfer.getData('name')
            if(!this.readOnly) {
                this.insertCode(value)
            }
        },

        // 拖拽入值处理
        handleDragOver(event) {
            event.preventDefault()
            event.dataTransfer.dropEffect = 'copy'
        },

        // 获取编辑器内当前代码
        getValue() {
            return this.monacoInstance.getValue()
        },

        // 设置编辑器的值
        setValue(code) {
            this.monacoInstance.setValue(code)
        },

        // 格式化操作
        handleFormat() {
            // this.monacoInstance.setValue(format(this.monacoInstance.getValue(), {language: "postgresql"}))
        },
    },
    mounted() {
        this.initEditor()
    },
    beforeDestroy() {
        if (this.monacoInstance) {
            this.monacoInstance.dispose()
        }
    }
}
</script>

<style lang="scss" scoped>
.editor {
    height: 100%;
}
</style>
